<template>
    <el-dialog v-model="dialogVisible" :title="winTitle" :close-on-click-modal="false" append-to-body width="800"
        class="editDialog" align-center>
        <el-form inline class="basicForm" label-position="right" v-model="formObj" label-width="120px">
            <el-form-item label="JSON预览" required>
                <vue-json-pretty :data="formData" />
            </el-form-item>

        </el-form>

        <template #footer>
            <el-button @click="dialogVisible = false" auto-insert-space>取消</el-button>
            <el-button type="primary" @click="onConfirm" auto-insert-space>确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps } from "vue";

import { ElMessage } from "element-plus";
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

import { clienttaskSave } from "../../utils/requests";

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

let winTitle = ref("配置发布");

let formData = ref({
    taskJson: "",
    deviceJson: "",
    channelJson: null,
    id: ""
});

const openDialog = (rowData) => {
    dialogVisible.value = true;
    formData.value.id = rowData.id;

    formData.value.taskJson = {
        task_name: rowData.taskName,
        task_description: rowData.taskDesc,
        task_sequence: rowData.taskSeq
    };

     formData.value
};

const onConfirm = () => {
    clienttaskSave({ ...formData.value }).then((data) => {
        if (data) {
            emits("confirm");
            ElMessage.success("保存成功");
            dialogVisible.value = false;
        } else {
            ElMessage.error("保存失败");
        }
    });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.basicForm,
.selectionForm {
    >* {
        width: calc(50% - 20px);
        margin-right: 20px;

        .selectInput {
            flex: 1;
        }

        :deep(.el-date-editor) {
            width: 100%;
        }
    }

    >.long {
        width: calc(100% - 20px);
        margin-right: 20px;
    }

    .sumUnit {
        .text {
            margin-right: 10px;
        }
    }
}

.uploadWrap {
    position: relative;
    width: 270px;

    input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}
</style>
